* {
    margin    : 0;
    padding   : 0;
    box-sizing: border-box;
}

/* 多边形旋转 */
@keyframes shapRound {
    0% {
        opacity  : 0;
        transform: scale(0) rotate(0deg);
    }

    3% {
        opacity  : 1;
        transform: scale(1) rotate(480deg);
    }

    90% {
        opacity      : 0.8;
        transform    : scale(1.5) rotate(1000deg);
        border-radius: 0px;
        border-width : 1px;
    }

    100% {
        opacity      : 0;
        border-radius: 1000px;
        border-width : 5px;
        transform    : scale(6) rotate(2100deg);
    }
}

/* 多边形旋转2 */
@keyframes shapRound1 {
    0% {
        opacity  : 0;
        transform: scale(0) rotate(0deg);
    }

    6% {
        opacity  : 1;
        transform: scale(1) rotate(-480deg);
    }

    90% {
        opacity      : 0.8;
        transform    : scale(1.5) rotate(-1300deg);
        border-radius: 0px;
        border-width : 1px;
    }

    100% {
        opacity      : 0;
        border-radius: 1000px;
        border-width : 5px;
        transform    : scale(6) rotate(-2100deg);
    }
}

.main {
    width         : 100%;
    height        : 1900px;
    position      : relative;
    // overflow   : hidden;

    .blackground {
        width           : 50%;
        height          : 100%;
        position        : absolute;
        right           : 0;
        background-color: #333333;
    }

    .lefttopyellowbar {
        width           : 15px;
        height          : 250px;
        background-color: #feea98;
        position        : absolute;
        left            : 20px;
        top             : 0;
    }

    .nav {
        height     : 100px;
        // outline : solid 1px;
        position   : relative;

        img,
        span {
            vertical-align: middle;
            line-height   : 100px;
        }

        span {
            font-size: 18px;
        }

        .left,
        .right {
            position: absolute;
            height  : 100%;
            width   : 50%;
        }

        .left {
            left: 0;



            img {
                margin-left : 20px;
                margin-right: 20px;
            }

            img:first-child {
                margin-left: 60px;
            }
        }
    }

    .right {
        right: 0;

        a {
            position: relative;

            &:hover {
                text-decoration: none;

                .shapeHover {
                    animation: shapRound 10s;
                }

                .shapeHover1 {
                    animation: shapRound1 10s;
                }
            }

            .shapeHover {
                @large     : 50px;
                width      : @large;
                height     : @large;
                position   : absolute;
                left       : 50%;
                top        : 50%;
                margin-left: -25px;
                margin-top : -25px;
                border     : solid 1px gold;
                opacity    : 0;
            }

            .shapeHover1 {
                @large     : 40px;
                width      : @large;
                height     : @large;
                position   : absolute;
                left       : 50%;
                top        : 50%;
                margin-left: -20px;
                margin-top : -20px;
                border     : solid 1px yellow;
                opacity    : 0;
            }
        }

        span {
            color        : white;
            // outline   : solid 1px;
            display      : inline-block;
            width        : 20%;
            text-align   : center;
        }
    }

    .main-title {
        z-index          : 2;
        width            : 25%;
        // outline       : solid 1px;
        line-height      : 3em;
        margin-left      : 100px;
        margin-top       : 60px;
        letter-spacing   : 0.2em;
        margin-bottom    : 60px;
    }

    .main-content {
        position      : absolute;
        width         : 100%;
        margin        : 0 auto;
        height        : 500px;
        // outline    : solid 1px;
        user-select   : none;
        overflow      : hidden;

        // 滚动条1
        .scroll-1 {
            // background-color: red;
            right : 12%;
            width : 20px;
            height: 80%;
            top   : 10%;

            .ball {
                width    : 20px;
                height   : 20px;
                transform: translateX(-10px);
                top      : 0;
            }
        }

        .box {
            width              : 70%;
            margin             : 0 auto;
            padding            : 60px 20px 60px 20px;
            // outline         : solid 1px red;
            background-color   : #fff;
            position           : relative;

            p {
                text-indent   : 2em;
                margin-bottom : 20px;
                font-size     : 18px;
                line-height   : 2em;
                letter-spacing: 0.1em;
            }
        }

        .sub-screen {
            width              : 85%;
            height             : 60px;
            background-color   : #fff;
            position           : absolute;
            left               : 0;
            top                : 500px - 60px;
            // outline         : solid 1px;
        }

        .like-this {
            position: absolute;
            left    : 10%;
            bottom  : 0;
        }

    }

    .remark,
    .right-tips {
        position: absolute;
        width   : 50%;
        height  : 900px;
        top     : 900px;
    }

    .remark {
        left               : 0;
        // background-color: pink;
        overflow           : hidden;

        .scroll-2 {
            width  : 20px;
            height : 430px;
            right  : 0;
            top    : 80px;
            z-index: 90;

            .ball {
                width    : 16px;
                height   : 16px;
                transform: translateX(-8px);
                top      : 0;
            }
        }

        .remark-view {
            position   : relative;
            user-select: none;
        }

        .userCommon {
            width              : 90%;
            // height          : 600px;
            position           : relative;
            margin             : 0 auto;
            margin-top         : 10px;
            background-color   : #fff;
            border-radius      : 15px;
            box-shadow         : 5px 5px 10px lightgray;
            overflow           : hidden;
            padding-bottom     : 20px;

            .likeBtn {
                cursor: pointer;
            }

            .head-img {
                position: absolute;
                left    : 20px;
                top     : 10px;
            }

            .title,
            .commonContent,
            .hr {
                margin-left: 80px;
            }

            .title {
                margin-top: 10px;
                font-size : 18px;
            }

            .commonContent {
                line-height: 2em;
            }

            .detial {
                height    : 30px;
                // outline: solid 1px;

                img,
                span {
                    vertical-align: middle;
                }

                img {
                    // outline    : solid 1px;
                    margin-left: 20px;
                }

                img:first-child {
                    margin-left: 80px;
                }

                span {
                    // outline     : solid 1px;
                    margin-right: 40px;
                    float       : right;
                }
            }

            .hr {
                margin-top         : 10px;
                width              : 85%;
                height             : 1px;
                color              : #efe09b;
                background-color   : #efe09b;
                // outline         : solid 1px;
            }

            .reCommon {
                // outline       : solid 2px;
                // width      : 80%;
                margin-left: 80px;
                position   : relative;

                // .head-img {
                //     // outline : solid 3px;
                //     // position: absolute;
                //     // left    : 20px;
                //     // top     : 10px;
                // }
            }

            .more {
                float          : right;
                margin-right   : 20px;
                // outline     : solid 1px;
                cursor         : pointer;
            }
        }
    }

    .circle {
        width           : 260px;
        height          : 260px;
        border          : dashed 8px #eed45f;
        border-right    : dashed 2px #eed45f;
        border-radius   : 1000px;
        // outline      : solid 1px;
        position        : absolute;
        right           : 0;
        top             : 32%;
        transform       : rotateY(65deg);

        transition: all 1s;

        &:hover {
            transform: rotateY(60deg) rotate(180deg);
        }

        &:active {
            transform: rotateY(60deg) rotate(360deg);
        }
    }

    .right-tips {
        left: 50%;

        .whiteBarArr {
            position           : absolute;
            width              : 180px;
            height             : 110%;
            left               : 0;
            bottom             : -100px;
            // outline         : solid 3px red;
            background-color   : transparent;

            .whiteBar {
                width              : 180px;
                height             : 40px;
                background-color   : #fff;
                // outline         : solid 1px;
                margin-bottom      : 18px;
                box-shadow         : 3px 3px 5px gray;

                &:nth-child(2),
                &:nth-child(5),
                &:nth-child(7),
                &:nth-child(10),
                &:nth-child(12) {
                    margin-bottom: 60px;
                }
            }
        }


        .tip {
            background-color: #fff;
            border-radius   : 15px;
            padding-left    : 15px;
            padding-right   : 15px;
            padding-bottom  : 20px;

            // p {}

            img {
                transform: translateX(-15px);
            }
        }

        .small-tip,
        .middle-tip {
            position: absolute;
            right   : 30%;

        }

        .small-tip {
            width     : 230px;
            height    : 230px;
            top       : 600px;
            // outline: solid 1px;
        }

        .small-tip:first-child {
            top: 0;
        }

        .middle-tip {
            width     : 300px;
            height    : 260px;
            top       : 285px;
            // outline: solid 1px;
        }
    }
}